<template>
	<el-dialog class="select_dialog dialog" title="请选择您所要报取的专业" :visible.sync="dialogVisible" :before-close="handleClose" width="60%">
		<div class="dialog_tabs">
			<ul>
				<li v-for="(tab,index) in selectProjects" :key="index" @click="tabClick(index)" :class="{select_dialog_li_active:index==selectTabIndex}"
				 :style="{height:dialogTabsHeight,lineHeight:dialogTabsHeight}"> {{tab.typeName}}
				</li>
			</ul>
		</div>
		<div class="dialog_tab_content text_left" v-for="(tab,index) in selectProjects" :key="index" :style="{display:index==selectTabIndex?'block':'none'}">
			<div v-for="(items,index1) in tab.children" :key="index1">
				<h2 class="dialog_tab_title">{{items.typeName}}</h2>
				<ul class="list-unstyled" style="border-bottom: 0px;">
					<li v-for="(item,index2) in items.children" :key="index2">
						<label>
							<input type="radio" name="selectClass" @click="classClick(item)">
							{{item.typeName}}
						</label>
					</li>
				</ul>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="closeDialog">取 消</el-button>
			<el-button type="primary" @click="sureDialog">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	export default {
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
		    type:String
		},
        created:function(){
        },
		data: function() {
			return {
				dialogVisible: this.isShow,
				selectProjects: [],
				dialogTabsHeight:0,
				selectTabIndex: 0, //tab切换索引
				form:{},
			}
		},
		mounted: function() {
			var that = this;
			this.common.post(this.api.getType, {
				projectCode:this.type
			}, function(res) {
				that.selectProjects = res.resultMap;
				that.dialogTabsHeight = 540 / that.selectProjects.length + "px";
			});
		},
		watch: {
			isShow: function() {
				this.dialogVisible = this.isShow;
			}
		},
		methods: {
			handleClose:function(){
				this.closeDialog();
			},
			// 模态框选项卡
			tabClick: function(index) {
				this.selectTabIndex = index;
			},
			// 模态框点击专业
			classClick: function(item) {
				this.form=item;
			},
			closeDialog: function() {
				this.dialogVisible = false
				this.$emit('closeDialogFather', this.dialogVisible);
			},
			sureDialog: function() {
				this.$emit('sureDialogFather',this.form);
			},
		}
	}
</script>

<style>

</style>
